<template>
	<view class="container" style="padding-bottom: 120rpx;">
		<u--form ref="queryForm" :model="query">
			<u-form-item label="" prop="box" style="display: flex;">
				<span style="margin-right: 20rpx;">容器码</span>
				<u--input 
						placeholder="请输入/扫描" 
						v-model.trim="query.containerCode" 
						suffixIcon="scan"
						@confirm="handlerConfirm"
						suffixIconStyle="font-size: 68rpx"
						style="flex: 1;">
				</u--input>
			</u-form-item>
		</u--form>
		<!-- 待分拣任务 -->
		<view style="margin: 10px 0;font-weight: 600;" v-if="list.length === 0">待分拣任务 :</view>
		<uni-table ref="info" border stripe emptyText="暂无数据" style="margin: 10px 0" v-if="list.length === 0">
			<uni-tr>
				<uni-th width="30">物料编号</uni-th>
				<uni-th width="30">目标容器</uni-th>
				<uni-th width="20">数量</uni-th>
				<uni-th width="30">操作</uni-th>
			</uni-tr>
			<uni-tr v-for="(item, index) in sortList" :key="index" class="td-container">
				<uni-td>
					<view class="selectable" @click="checkDetail(item.materialCode)">
						{{ item.materialCode.slice(0, 9) }}</br>{{ item.materialCode.slice(9, 18) }}
					</view>
				</uni-td>
				<uni-td>
					<view class="selectable" @click="fullBox(item.targetContainerCode)">
						{{ item.targetContainerCode }}
					</view>
				</uni-td>
				<uni-td class="selectable">{{ item.materialQty }}</uni-td>
				<uni-td>
					<view style="display: flex;gap: 10rpx;" class="button-container">
						<u-button type="primary" style="font-size: 8rpx;" text="分拣" @click="confirmSort(item)"></u-button>
						<u-button type="error" style="font-size: 8rpx;" text="异常" @click="confirmException"></u-button>
					</view>
				</uni-td>
			</uni-tr>
		</uni-table>
		<!-- 模态框 -->
		<u-modal
			:show="show"
			:title="title"
			@confirm="cancelModal"
		>
			<view style="display: flex;flex-direction: column;">
				<view style="display: flex;">
					<view style="flex: 2;">物料编号：</view>
					<view style="flex: 3;">{{ selectedMaterial.materialCode }}</view>
				</view>
				<view style="display: flex;">
					<view style="flex: 2;">物料名称：</view>
					<view style="flex: 3;">{{ selectedMaterial.materialName }}</view>
				</view>
				<view style="display: flex;">
					<view style="flex: 2;">物料批次号：</view>
					<view style="flex: 3;">{{ selectedMaterial.materialBatch }}</view>
				</view>
				<view style="display: flex;">
					<view style="flex: 2;">数量：</view>
					<view style="flex: 3;">{{ selectedMaterial.materialQty }}</view>
				</view>
				<view style="display: flex;">
					<view style="flex: 2;">单位：</view>
					<view style="flex: 3;">{{ selectedMaterial.unit }}</view>
				</view>
			</view>
		</u-modal>
		<view class="buttonStyle">
			<u-button type="warning" @click="reset">重置</u-button>
		</view>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import {
		uniCard,
		uniTable,
		uniTr,
		uniTd,
		uniTh
	} from '@dcloudio/uni-ui'
	import { getMaterialDetail, submitSort, getSortList, getSortListAPI, confirmSortAPI } from '@/api/work/sort.js'
	export default {
		components: {
			uniCard,
			uniTable,
			uniTr,
			uniTd,
			uniTh
		},
		data() {
			return {
				query: {
					containerCode: ''
				},
				list: [],
				sortList: [
					// {
					// 	materialCode: 'shjdnfhc986427dhcg',
					// 	targetContainerCode: 'A000000001',
					// 	materialQty: 100
					// }
				],
				show: false,
				title: '物料详情',
				selectedMaterial: {}
			};
		},
		onLoad(options) {
			uni.$on('scancodedate',(data) => this.getCode(data.code))
		},
		onUnload() {  
		  // 移除监听事件      
		  uni.$off('scancodedate')
		},
		mounted() {
		},
		methods: {
			getCode(code) {
				const pattern = /^[A-Za-z]\d{9}$/
				if (pattern.test(code)) {
					this.query.containerCode = code
					this.getSortList()
				}
			},
			// 回车调getSortList
			handlerConfirm() {
				this.getSortList()
			},
			cancelModal() {
				// this.selectedMaterial = {}
				this.show = false
			},
			// 重置
			reset() {
				this.query = {
					containerCode: ''
				}
				this.sortList = []
			},
			// 获取待分拣列表
			async getSortList() {
				const res = await getSortListAPI(this.query.containerCode)
				if (res.meta.code === 200)	{
					this.sortList = res.data.list
				} else {
					return this.$refs.uToast.show({
						type: 'warning',
						message: res.meta.msg
					})
				}
			},
			// 提交
			async confirmSort (item) {
				const res = await confirmSortAPI(item.id)
				if (res.meta.code === 200) {
					this.$refs.uToast.show({
						type: 'success',
						message: res.meta.msg
					})
					this.getSortList()
				} else {
					return this.$refs.uToast.show({
						type: 'warning',
						message: res.meta.msg
					})
				}
			},
			async confirmException() {
				
			},
			checkDetail(val) {
				const foundMaterial = this.sortList.find(item => item.materialCode === val)
				if (foundMaterial) {
					this.selectedMaterial = foundMaterial
					this.show = true
				}
			},
			fullBox(val) {
				uni.navigateTo({
					url: `/pages/work/sort/filledBox?containerCode=${val}`
				})
				console.log('点击了满箱');
			}
		}
	}
</script>

<style lang="scss" scoped>
.selectable {
	user-select: text; /* 确保内容可选 */
}
.buttonStyle {
	display: flex;
	gap: 20rpx;
	box-sizing: border-box;
	position: fixed;
	left: 0;bottom: 0;
	padding: 10rpx;
	width: 100%;
	background-color: #fff;
}
.td-container {
	.uni-table-td {
		width: 200rpx;
	}
}
.button-container {
	width: 200rpx;
	.u-button {
		width: 100rpx;
		height: 60rpx;
	}
}
</style>
